<template>
  <div class="Sharepart">
      <div class="List">
        <ul>
          <li>
            <van-skeleton :loading="false" title avatar :row="3" />
            <div class="box">
              <div class="pic"></div>
              <div class="pic"></div>
              <div class="pic"></div>
            </div>
            <div class="mark">
              <img src="" alt="">
              <span>用跑步征服世界</span>
              <span>关注</span>
              </div>
            <div class="footer">
              <span>喇叭</span>
              <span>留言</span>
              <span>三点</span>
            </div>
          </li>
        </ul>
      </div>
  </div>
</template>
<script>
export default ({
})
</script>
<style lang="less" scoped>
.Sharepart {
  width: 100%;
}
.List {
  width: 100%;
  height: 20rem;
}
ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.List ul li {
  position: relative;
  width: 97%;
  height: 19rem;
  margin: auto;
  background-color: #e0dede;
}
.box {
  /* display: flex; */
  position: absolute;
  width: 100%;
  height: 8.5rem;
  background-color: #fff;
  /* margin-top: 0.24rem; */
  top: 8rem;
  justify-content: space-between;
  align-items: center;
  .pic {
  float: left;
  width: 7.5rem;
  height: 8rem;
  margin-right: 0.1rem;
  background-color: #999797;
  border-radius: 0.5rem;
/*   margin-top: 0.5rem;
  margin-right: 1.25rem; */
}
.pic:nth-child(3) {
  margin-right: 0;
}
}
.mark {
  position: absolute;
  width: 7rem;
  height: 1rem;
  background-color: rgb(200, 204, 205);
  line-height: 1rem;
  /* margin-top: 16.5rem; */
  top: 16.5rem;
  img {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: rgb(180, 172, 172);
    margin-right: 0.3rem;
  }
  span {
    display: inline-block;
    position: absolute;
    width: 6rem;
    height: 1rem;
    font-size: 0.8rem;
    top: 0.1rem;
    line-height: 0.8rem;
  }
  span:nth-child(3) {
    display: inline-block;
    position: absolute;
    width: 4rem;
    height: 2rem;
    font-size: 0.8rem;
    top: -16.5rem;
    right: -15rem;
    background-color: rgb(7, 148, 54);
    border-radius: 1rem;
    text-align: center;
    line-height: 2rem;
    color: #fff;
  }
}
.footer {
  position: absolute;
  width: 100%;
  height: 1rem;
  font-size: 0.8rem;
  top: 17.5rem;
  span {
    position: absolute;
    width: 2rem;
    height: 1rem;
    margin-top: 0.5rem;
  }
  span:nth-child(1) {
    left: 1rem;
  }
  span:nth-child(2) {
    left: 5rem;
  }
  span:nth-child(3) {
    right: 1rem;
  }
}
</style>
